.invite_reward{ 
	padding: 55px;
	ul{
		list-style: none;
	}
	.inv_reBg{
		border-radius: 4px;
		overflow: hidden;
		box-shadow: 0 0 4px #efefef;  
		.inv_reTitleBg{
			height: 50px;
			background: #f5f9fd;
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: center;
			.inv_reTitle{
				display: flex;
				flex-direction: row;
				align-items: center;
				img{
					display: block;
					height: 22px;
				}
				span{
					font-size: 16px;
					color: #2489F2;
					margin: 0 12px;
					display: block;
					line-height: 50px;
				}
			}
			.R{
				position: absolute;
				top: 0;
				right: 0;
				display: flex;
				flex-direction: row;
					align-items: center; 
				height: 50px;
				.Le{
					margin-right: 40px;
					color: #63A7EE;
					font-size: 14px;
					line-height: 28px;
					height: 28px;
					cursor: pointer;
					border-bottom: 1px solid #63A7EE;
				}
				.Ri{
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-right: 40px;
					cursor: pointer;
					img{
						height: 13px;
						display: block;
					}
					span{
						display: block;
						color: #63A7EE;
						font-size: 14px;
						line-height: 24px;
						margin-left: 5px;
					}
				}
			}
		}
	
		.inv_reMainBg{
			padding: 55px;
			.t{
				display: flex;
				flex-direction: row; 
				justify-content: space-around;
				>li{
					width: 22%; 
					.Lit{
						height: 308px;
						position: relative;
						display: flex;
						flex-direction: row;
						justify-content: center;
						align-items: center; 
						.top_00{
							position: relative;
							width: 241px;
							height: 308px; 
							>img{
								display: block;
								width: 100%;
								height: 100%;
							}
							.top_ceng_00{
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%; 
								.t_c_00{
									position: absolute;
									top: 118px;
									left: 0;
									width: 100%; 
									h4{
										text-align: center;
										    font-size: 20px;
										    color: #EA463B;
									}
									
									.tit{ 
										display: flex;
										flex-direction: row;
										justify-content: center;
										align-items: center;
										img{
											height: 1px;
											display: block;
										}
										span{
											    font-size: 12px;
											    color: #EA463B;
												display: block;
												margin: 0 10px;
												height: 16px;
												line-height: 16px;
										}
									}
								}
								
								>h3{
									position: absolute;
									width: 100%;
									left: 0;
									top: 228px; 
									color: #fff;
									font-weight: normal;
									text-align: center;
									    font-size: 16px;
									    color: #fff;
										line-height: 24px;
								}
							}
						}
						
						.top_01{
							position: relative;
							width: 180px;
							height: 214px; 
							>img{
								display: block;
								width: 100%;
								height: 100%;
							}
							.top_ceng_00{
								position: absolute;
								top: 0;
								left: 0;
								width: 100%;
								height: 100%; 
								.t_c_00{
									position: absolute;
									top: 90px;
									left: 0;
									width: 100%; 
									h4{
										text-align: center;
										    font-size: 20px;
										    color: #FF7D2D;
									}
									
									.tit{ 
										display: flex;
										flex-direction: row;
										justify-content: center;
										align-items: center;
										img{
											height: 1px;
											display: block;
										}
										span{
											    font-size: 12px;
											    color: #FF7D2D;
												display: block;
												margin: 0 10px;
												height: 16px;
												line-height: 16px;
										}
									}
								}
								
								>h3{
									position: absolute;
									width: 100%;
									left: 0;
									bottom:12px; 
									color: #fff;
									font-weight: normal;
									text-align: center;
									    font-size: 16px;
									    color: #fff;
										line-height: 24px;
								}
							}
						}
					}
				}
			}
			.m{
				height: 28px; 
				position: relative;
				.line{
					background: #F0F1F3;
					border-radius: 5px;
					height: 6px;
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					z-index: -1;
					margin: auto;
				}
				
				.m_MainBg{
					display: flex;
					flex-direction: row;
					position: relative;
					z-index: 0;
					li{
						flex: 1;
						height: 28px; 
						position: relative;
						img{
							position: absolute;
							width: 28px;
							height: 28px;
							display: block;
							top: 0;
							right: 0;
							bottom: 0;
							left: 0;
							margin: auto;
						}
						.block{
							width: 50%;
							background: linear-gradient(to right,#FFA92F,#FF7D2D);
							border-radius: 5px;
							height: 6px;
							position: absolute;
							top: 0;
							left: 0;
							bottom: 0;
							margin: auto;
							z-index: -1;
						}
					}
				}
			}
			.b{
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				align-items: flex-start;
				margin-top: 30px;
				>li{ 
					background: #FFFFFF;
					box-shadow: 0px 4px 20px #efefef;
					border-radius: 10px;
					padding: 15px;
					width: 254px;
					border: 1px solid #F0F1F3;
					position: relative;
					
					.t_ul_box{  
						>li{
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							margin: 10px 0 30px;
							.Le{
								display: flex;
								flex-direction: row;
								align-items: center;
								img{
									display: block;
									width: 30px;
									height: 30px;
									margin-right: 10px;
								}
								.leTxt{
									p{
										font-size: 13px;
										line-height: 19px;
										color: #666;
									}
									.money{
										display: flex;
										flex-direction: row;
								align-items: center;
										span{
											display: block;
											    color: #FFA92F;
											    font-size: 12px;
										line-height: 19px;
										}
										img{
											display: block;
											width: 12px;
											height: 14px;
											margin-left: 3px;
										}
									}
								}
							}
							.Ri{
								    width: 72px;
								    height: 24px;
								    background: #2489F2;
								    border-radius: 14px;
								    color: #fff;
								    text-align: center;
								    line-height: 24px;
								    font-size: 12px; 
								    cursor: pointer;
							}
						}
					}
					
					.tag{
						display: block;
						position: absolute;
						top: 0;
						left: 0;
						width: 30px;
					}
					.t_txt{
						overflow: hidden;
						p{
							font-size: 14px;
							color: #333333;
							line-height: 20px;
							text-align: center;
							margin-top: 20px;
						}
						span{
							display: block;
							font-size: 12px;
							color: #333333;
							text-align: center;
							margin: 16px 0 30px;
						}
					}
				
					.btnBoxBg{
						display: flex;
						flex-direction: row;
						justify-content: center;
						padding: 0 20px;
						border-top: 1px dashed #E5E5E5;
						.btnBox{
							display: flex;
							flex-direction: row;
							align-items: center;
							cursor: pointer;
							padding-top: 15px;
							img{
								display: block;
								width: 14px;
								margin-right: 5px;
							}
							span{
								display: block;
								font-size: 13px;
								line-height: 24px;
								color: #63A7EE;
							}
						}
					}
				
				}
			}
		}
	
	
	}
}

.mb_inv_reM_bg{
	display: none;
}

.tuBg{
	width: 500px;
	margin:50px auto 0;
}

.tuBg dt h3{
	color: #333;
	font-size: 24px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}

.tgLink{
	margin: 50px auto;
	color: #FF6600;
	font-size: 16px;
	line-height: 24px;
	width: 400px;
	padding: 15px 30px;
	text-align: center;
	word-break: break-all;
	border-radius: 8px;
	border: 4px dotted #FF6600;
	font-weight: bolder;
}

.idx_Reg{
	width: 200px;
	height: 40px;
	color: #fff;
	font-size: 14px;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	border-radius: 6px;
	margin:50px auto 0;
	background-color:#369DFF;
}

.tuBg dd{
	margin-top:60px;
}

.tuBg dd h3{
	color: #333;
	font-size: 24px;
	height: 30px;
	line-height: 30px;
	text-align: center;
}


.QRCodeDiv{
	border: 4px solid #000;
	width: 200px;
	height: 200px;
	margin:50px auto 0;
}

 


	
@media screen and (max-width:1200px){
	.mb_inv_reM_bg{
		display: block;
	}
	.inv_reMainBg{
		display: none;
	}
	
	.invite_reward{
		padding: 20px 5px !important;
	}
	
	.inv_reTitleBg{
		height: auto !important;
		flex-direction: column !important; 
		.inv_reTitle{
			margin-top: 10px;
			justify-content: center;
			img{
				height: 12px !important;
				
			}
			span{
				line-height: 20px !important;
				text-align: center;
				font-size: 14px !important;
			}
		}
		.R{
			position: relative !important; 
			justify-content: center;
			height: 30px !important;
			margin-bottom: 10px;
			>div{
				margin: 0 20px !important;
			}
		}
	}
	
	.mb_inv_reM_bg{
		display: flex;
		flex-direction: row;
		justify-content: center;
	}
	
	.mb_inv_reMainBg{
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		width: 300px; 
		padding-left: 16px;
		.step_00::after{
			content: "";
			position: absolute;
			top: 5px;
			left: -15px;
			width: 6px;
			height: 280px;
			border-radius: 5px;
			z-index: 0;
			background: linear-gradient(to right, #FFA92F, #FF7D2D);
		}
		>li{
		   margin: 10px 0;	
		   position: relative;
		   .tgImg{
			   display: block;
			   width: 20px;
			   height: 20px;
			   position: absolute;
			   top: 275px;
			   left: -20px;
			   z-index: 1;
		   }
		   .Lit{
		   	height: 308px;
		   	position: relative;
		   	display: flex;
		   	flex-direction: row;
		   	justify-content: center;
		   	align-items: center; 
		   	.top_00{
		   		position: relative;
		   		width: 241px;
		   		height: 308px; 
		   		>img{
		   			display: block;
		   			width: 100%;
		   			height: 100%;
		   		}
		   		.top_ceng_00{
		   			position: absolute;
		   			top: 0;
		   			left: 0;
		   			width: 100%;
		   			height: 100%; 
		   			.t_c_00{
		   				position: absolute;
		   				top: 118px;
		   				left: 0;
		   				width: 100%; 
		   				h4{
		   					text-align: center;
		   					    font-size: 20px;
		   					    color: #EA463B;
		   				}
		   				
		   				.tit{ 
		   					display: flex;
		   					flex-direction: row;
		   					justify-content: center;
		   					align-items: center;
		   					img{
		   						height: 1px;
		   						display: block;
		   					}
		   					span{
		   						    font-size: 12px;
		   						    color: #EA463B;
		   							display: block;
		   							margin: 0 10px;
		   							height: 16px;
		   							line-height: 16px;
		   					}
		   				}
		   			}
		   			
		   			>h3{
		   				position: absolute;
		   				width: 100%;
		   				left: 0;
		   				top: 228px; 
		   				color: #fff;
		   				font-weight: normal;
		   				text-align: center;
		   				    font-size: 16px;
		   				    color: #fff;
		   					line-height: 24px;
		   			}
		   		}
		   	}
		   	
		   	.top_01{
		   		position: relative;
		   		width: 180px;
		   		height: 214px; 
		   		>img{
		   			display: block;
		   			width: 100%;
		   			height: 100%;
		   		}
		   		.top_ceng_00{
		   			position: absolute;
		   			top: 0;
		   			left: 0;
		   			width: 100%;
		   			height: 100%; 
		   			.t_c_00{
		   				position: absolute;
		   				top: 90px;
		   				left: 0;
		   				width: 100%; 
		   				h4{
		   					text-align: center;
		   					    font-size: 20px;
		   					    color: #FF7D2D;
		   				}
		   				
		   				.tit{ 
		   					display: flex;
		   					flex-direction: row;
		   					justify-content: center;
		   					align-items: center;
		   					img{
		   						height: 1px;
		   						display: block;
		   					}
		   					span{
		   						    font-size: 12px;
		   						    color: #FF7D2D;
		   							display: block;
		   							margin: 0 10px;
		   							height: 16px;
		   							line-height: 16px;
		   					}
		   				}
		   			}
		   			
		   			>h3{
		   				position: absolute;
		   				width: 100%;
		   				left: 0;
		   				bottom:12px; 
		   				color: #fff;
		   				font-weight: normal;
		   				text-align: center;
		   				    font-size: 16px;
		   				    color: #fff;
		   					line-height: 24px;
		   			}
		   		}
		   	}
		   }
		   
		   .Lib{
			       background: #FFFFFF;
			       box-shadow: 0px 4px 20px #efefef;
			       border-radius: 10px;
			       padding: 15px;
			       width: 240px;
			       border: 1px solid #F0F1F3;
			       position: relative;
				   .tag{
				   	display: block;
				   	position: absolute;
				   	top: 0;
				   	left: 0;
				   	width: 30px;
				   }
				   .t_txt{
				   	overflow: hidden;
				   	p{
				   		font-size: 14px;
				   		color: #333333;
				   		line-height: 20px;
				   		text-align: center;
				   		margin-top: 20px;
				   	}
				   	span{
				   		display: block;
				   		font-size: 12px;
				   		color: #333333;
				   		text-align: center;
				   		margin: 16px 0 30px;
				   	}
				   }
				   
			   .t_ul_box{
			   	>li{
			   		display: flex;
			   		flex-direction: row;
			   		justify-content: space-between;
			   		align-items: center;
			   		margin: 10px 0 30px;
			   		.Le{
			   			display: flex;
			   			flex-direction: row;
			   			align-items: center;
			   			img{
			   				display: block;
			   				width: 30px;
			   				height: 30px;
			   				margin-right: 10px;
			   			}
			   			.leTxt{
			   				p{
			   					font-size: 13px;
			   					line-height: 19px;
			   					color: #666;
			   				}
			   				.money{
			   					display: flex;
			   					flex-direction: row;
			   			align-items: center;
			   					span{
			   						display: block;
			   						    color: #FFA92F;
			   						    font-size: 12px;
			   					line-height: 19px;
			   					}
			   					img{
			   						display: block;
			   						width: 12px;
			   						height: 14px;
			   						margin-left: 3px;
			   					}
			   				}
			   			}
			   		}
			   		.Ri{
			   			    width: 72px;
			   			    height: 24px;
			   			    background: #2489F2;
			   			    border-radius: 14px;
			   			    color: #fff;
			   			    text-align: center;
			   			    line-height: 24px;
			   			    font-size: 12px; 
			   			    cursor: pointer;
			   		}
			   	}
			   }
			   
			   .btnBoxBg{
			   	display: flex;
			   	flex-direction: row;
			   	justify-content: center;
			   	padding: 0 20px;
			   	border-top: 1px dashed #E5E5E5;
			   	.btnBox{
			   		display: flex;
			   		flex-direction: row;
			   		align-items: center;
			   		cursor: pointer;
			   		padding-top: 15px;
			   		img{
			   			display: block;
			   			width: 14px;
			   			margin-right: 5px;
			   		}
			   		span{
			   			display: block;
			   			font-size: 13px;
			   			line-height: 24px;
			   			color: #63A7EE;
			   		}
			   	}
			   }
		   }
		}
	}
	
	.mb_inv_reMainBg:after{
		content: "";
		background: #F0F1F3;
		border-radius: 5px;
		width: 6px;
		height: calc(100% - 30px);
		position: absolute;
		top: 15px;
		left:15px;
		z-index: -1;
	}
	
}


@media screen and (max-width:767px) {
	.tuBg{
		width: 100%;
	}
	
	.tgLink{
		width: 250px;
	}
}





















